<template>
    <div class="comment">
        <!-- 发表评论 -->
        <div style="margin-bottom: 100px;">
            <h4 style="padding: 0px 5px;">发表评论</h4>
            <hr />
            <van-cell-group>
                <van-field v-model="commentValue" placeholder="请输入用户名" />
            </van-cell-group>
            <van-button type="info" size="large" style="margin:5px 0;" @click="submitComment()">发表评论</van-button>
            <div v-for="(item,index) in getComment" :key="index">
              <div class="title">
                <span>第{{ index + 1 }}楼</span>
                <span>用户：{{ item.user_name }}</span>
                <span>发表时间：{{ item.add_time | formatData }}</span>
              </div>
              <p style="height:30px;">{{ item.content }}</p>
            </div>
            <van-button plain type="danger" size="large" @click="loadingComment" >加载更多</van-button>
        </div>
    </div>
</template>

<script>
export default {
  props: ['comId'],
  data() {
    return {
      commentValue: '',
      page: 1,
      getComment: []
    }
  },

  created() {
    this.getImageComment()
  },

  methods: {
    // 获取评论
    async getImageComment () {
      const { data: res } = await this.$axios.get(`/api/getcomments/${this.comId}?pageindex=${this.page}`)
      if (res.status !== 0) return this.$notify('评论失败')
      this.getComment = res.message
    },
    // 点击加载
    async loadingComment () {
      this.page++
      const { data: res } = await this.$axios.get(`/api/getcomments/${this.comId}?pageindex=${this.page}`)
      this.getComment.push(...res.message)
    },
    // 发表评论
    async submitComment () {
      if (this.commentValue.trim() === '') return this.$notify('请填写评论信息在提交')
      const { data: res } = await this.$axios.post(`/api/postcomment/${this.comId}`, {
        content: this.commentValue
      })
      if(res.status !== 0 ) return this.$notify('评论失败')
      this.$notify({ type: 'success', message: '评论成功' })
      this.getImageComment()
      this.commentValue = ''
    }
  }
}
</script>

<style scoped lang='less'>
.title{
    height: 30px;
    background-color: #ccc;
    font-size: 12px;
    line-height: 30px;
    span{
      margin-left: 10px;
    }
}
</style>
